<template>
  <view class="newstyle-queue-details">
    <!-- 状态标签 -->
    <view class="newstyle-time-tabs">
      <view :class="{'active': selectedStatus === 'queueing', 'time-tab': true}" @click="selectStatus('queueing')">排队中</view>
      <view :class="{'active': selectedStatus === 'called', 'no-border time-tab': true}" @click="selectStatus('called')">已叫号</view>
      <view :class="{'active': selectedStatus === 'entered', 'time-tab': true}" @click="selectStatus('entered')">已入场</view>
    </view>
    
    <!-- 车辆信息卡片列表 -->
    <view class="vehicle-list">
      <!-- 使用v-for循环渲染多个车辆卡片 -->
      <view class="vehicle-card" v-for="(vehicle, index) in vehicles" :key="index">
        <!-- 车辆信息头部 -->
        <view class="vehicle-header">
          <view class="plate-number">{{ vehicle.vehicleNo }}</view>
          <view class="status-badge">{{ lineStatusObj[vehicle.queueStatus] || '' }}</view>
        </view>
        
        <!-- 信息列表 -->
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">排队号码</text>
            <text class="info-value">{{ vehicle.lineupNo }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">客户</text>
            <text class="info-value">{{ vehicle.customerName }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">煤种</text>
            <text class="info-value">{{ vehicle.coalSubtypeName }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">司机姓名</text>
            <text class="info-value">{{ vehicle.driverName }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">司机手机号</text>
            <text class="info-value">{{ vehicle.driverMobile }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">排号时间</text>
            <text class="info-value">{{ vehicle.queueTime || '-' }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getDetailsCards } from '@/api/queueStatistics';
  import { getDictList } from '@/api/login';
  export default {
    data() {
      return {
        selectedStatus: 'queueing', // 当前选中的状态
        lineStatusLists:[],
        queueState: {
          queueing: '排队中',
          called: '已叫号',
          entered: '已入场'
        },
        lineStatusObj: {},
        queueStauts: {
          queueing: 40010,
          called: 40040,
          entered: 40050
        },
        vehicles: [], // 车辆数据列表
        queryParam: {
          pageNo: 1,
          pageSize: 10,
          queueConfigId: undefined,
          queueVehicleType: undefined,
          queueType: undefined,
          queueStatus: 40010,//排号状态
          startTime: undefined,
          endTime: undefined
        }
      }
    },
    methods: {
      // 选择状态
      selectStatus(status) {
        this.selectedStatus = status
        this.queryParam.queueStatus = this.queueStauts[status]
        this.getVehicles() // 根据状态重新获取车辆数据
      },
      // 获取车辆数据
      async getVehicles() {
        let res = await getDetailsCards(this.queryParam)
        if (res.code == 0) {
          this.vehicles = res.data.list || []
        }
        
      },
      async getDictLists() {
        try {
          const res = await getDictList();
          if (res?.code === 0 && Array.isArray(res.data)) {
            // 使用reduce直接将过滤后的数据转换为对象映射
            this.lineStatusObj = res.data
              .filter(e => e?.dictType === 'lineup_queue_status' && e?.dictValue !== undefined && e?.dictName !== undefined)
              .reduce((acc, curr) => {
                acc[curr.dictValue] = curr.dictName;
                return acc;
              }, {}); // 传入空对象作为初始值，避免旧数据影响
          }
        } catch (error) {
          console.error('获取字典列表失败:', error);
        }
      },
    },
    onLoad(options) {
      // 页面加载时获取数据
      console.log(options)
      this.queryParam.queueVehicleType = options.queueVehicleType
      this.queryParam.queueConfigId = options.queueConfigId
      this.queryParam.queueType = options.queueType
      this.queryParam.startTime = options.startTime
      this.queryParam.endTime = options.endTime
      //
       async getDictLists() {
        const res = await getDictList();
        if (res.code === 0) {
          this.companyRange = (res?.data || []).filter(
            (e) => e.dictType === 'enter_type'
          );
          this.cusTypeName = this.companyRange[0].label;
          this.itemList.cusType = this.companyRange[0].value;
        }
      },
      this.getVehicles()
    }
  }
</script>

<style lang="scss" scoped>
  
</style>